const e = sel => document.querySelector(sel)
const es = sel => document.querySelectorAll(sel)

// panel button click
const listenPanelBtn = function() {
    let divBtns = e('#console-panel')
    divBtns.addEventListener('click', event => {
        const target = event.target

        if (target.classList.contains('btn-active')) {
            return
        }
        // log(8, target)
        let id = target.getAttribute('id')
        if (id !== 'panel-clean') {
            // 获取当前的 id
            // 删除其他元素的 active
            removeChildClassName(divBtns, 'btn-active')
            // 给当前元素添加 active
            target.classList.add('btn-active')
            // 执行逻辑
        }
        renderConsoleContent(id)
    })
}

// render panel button click content
const renderConsoleContent = function(id) {
    const cleanMap = {
        'panel-log': 'console-log',
        // 'panel-storage': 'console-storage',
        'panel-network': 'console-network',
        'panel-clean': '',
    }
    if (id === 'panel-log') {
        // js log
        renderConsoleLog()
    } else if (id === 'panel-storage') {
        // js storage
        renderStorage()
    } else if (id === 'panel-network') {
        // js network
        renderNetwork()
    } else if (id === 'panel-clean') {
        // 清除当前
        let selectbtns = es('.panel-item')
        selectbtns.forEach(item => {
            if (item.classList && item.classList.contains('btn-active')) {
                let tid = item.getAttribute('id')
                // log(40, tid)
                let eleid = cleanMap[tid]
                if (eleid) {
                    cleanElementChild(`#${eleid}`)
                    bo = false
                }
            } else {
                cleanElementChild(`#panel-log`)
            }
        })
    }
}

const cleanElementChild = function(ele) {
    const parent = e(ele)
    // log(47, ele, parent)
    const items = parent.querySelectorAll('.table-info')
    // log(48, items)
    // const items = es('.table-info')
    items.forEach(item => {
        parent.removeChild(item)
    })
}

const testCors = function() {
    let method = 'get'
    let path = 'http://localhost:3000/api/todo/all/cors'
    let data = {}
    let headers = {
        'Content-Type': 'application/json',
        'Access-Control-Allow-0rigin': '*',
    }
    ajax(method, path, headers, data, function(r) {
        log('response from server is', r.response)
    })
}

const testError = function() {
    let method = 'post'
    let path = 'http://localhost:3000/api/todo/all/data'
    let data = {}
    let headers = {
        'Content-Type': 'application/json',
        'Access-Control-Allow-0rigin': '*',
    }
    ajax(method, path, headers, data, function(r) {
        log('response from server is', r.response)
    })
}

const handleTestBtn = function() {
    e('#cors-request').addEventListener('click', e => {
        testCors()
    })
    e('#error-request').addEventListener('click', e => {
        testError()
    })
}

const mlogTest = function() {
    let a = [1, 2, 3, 4, 5, 5, 5, 6,]

    let o = {
        1: 'auto',
        2: 'bwm',
        3: a,
    }

    let c = [a, o, 1, 2, 3]
    mlog(c)
}

const __main = function() {
    listenPanelBtn()
    handleTestBtn()

    // js log
    renderConsoleLog()

    mlogTest()
    // log js
    handleFold()
}

__main()
